<!-- MechanicalRent -->
<template>
  <div class="MechanicalRent">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container" v-if="isSwitchData">
      <!-- 机械寻租页面 -->
      <div class="MechanicalRentBox">
        <div class="titleBg1">
          <img
            src="./../../../../../public/img/rent/rentTitleIcon.png"
            calss="rentTitleIcon"
          />
          <div class="titleName1">
            请在您的设备需求单中提供项目详细信息，方便设备方提供更精准的报价。
          </div>
        </div>
        <div class="listContainer">
          <div class="listInputBox">
            <div class="listBox">
              <div class="listContent">
                <div class="styleTips">*</div>
                <div class="listName">姓名:</div>
              </div>
              <div class="inputContainer">
                <el-input
                  placeholder="请输入姓名"
                  class="inputStyle"
                  v-model="userName"
                ></el-input>
              </div>
            </div>
            <div class="listBox1">
              <div class="listContent">
                <div class="styleTips">*</div>
                <div class="listName">联系方式:</div>
              </div>
              <div class="inputContainer1">
                <el-input
                  placeholder="请输入联系方式"
                  class="inputStyle"
                  maxlength="11"
                  v-model="userPhone"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="listInputBox">
            <div class="listBox">
              <div class="listContent">
                <div class="styleTips">*</div>
                <div class="listName">项目名称:</div>
              </div>
              <div class="inputContainerMargin">
                <el-input
                  placeholder="请输入项目名称"
                  class="inputStyle"
                  v-model="projectName"
                ></el-input>
              </div>
            </div>
            <div class="listBox1">
              <div class="listContent">
                <div class="styleTips">*</div>
                <div class="listName">报名截止日期:</div>
              </div>
              <div class="inputContainerMargin1">
                <el-date-picker
                  v-model="timeValue"
                  type="date"
                  placeholder="选择日期"
                  class="inputStylePick"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="listInputBox">
            <div class="listBox">
              <div class="listContent">
                <div class="styleTips">*</div>
                <div class="listName">预计工期:</div>
              </div>
              <div class="inputContainerMargin">
                <el-input
                  placeholder="请输入预计工期"
                  class="inputStyle"
                  v-model="expect_period"
                ></el-input>
              </div>
              <div class="selectedBox">
                <input
                  type="text"
                  class="inputSelect"
                  v-model="expect_period_units"
                  placeholder="请选择"
                />
                <el-dropdown>
                  <img
                    src="./../../../../assets/img/selectIcon.png"
                    class="selectIcon"
                  />
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(itemz, i) of predictArray"
                      :key="i"
                      @click.native="handleCommand2(itemz, i)"
                      >{{ itemz }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <!-- 施工地址 -->
          <div class="listSelectBox">
            <div class="listWidthAddress">
              <div class="listWidthName">施工地点:</div>
              <el-input
                type="text"
                v-model="place"
                placeholder="请选择施工地点"
                class="listWidthselect"
                id="pickerinput2"
                @focus="onAddress"
                @change="onChangeAddress"
              ></el-input>
              <el-amap
                v-show="isAddress"
                ref="map"
                vid="amapDemo"
                :amap-manager="amapManager"
                :center="center"
                :zoom="zoom"
                :plugin="plugin"
                :events="events"
                class="amap-demo"
              >
                <el-amap-marker vid="amapDemo" :position="center">
                </el-amap-marker>
              </el-amap>
            </div>
            <!-- <div class="listWidth">
              <div class="listWidthName">结算周期:</div>
              <el-select
                v-model="settlement"
                slot="prepend"
                placeholder="请选择结算周期"
                class="listWidthselect"
              >
                <el-option label="日结" value="日结"></el-option>
                <el-option label="周结" value="周结"></el-option>
                <el-option label="半月结" value="半月结"></el-option>
                <el-option label="月结" value="月结"></el-option>
                <el-option label="季结" value="季结"></el-option>
                <el-option label="完工结" value="完工结"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </div> -->
          </div>
        </div>
        <!-- 展开版块 -->
        <div class="upImgBox">
          <div class="onDown" @click="onDown">
            <span class="dwonNmae">{{ isBtn }}</span>
            <img :src="isImg" class="selectButtomIcon" />
          </div>
          <div class="downContent" v-show="isShow">
            <div class="contentBox">
              <div class="contentName">施工说明:</div>
              <div class="checkListBox">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="包吃住"></el-checkbox>
                  <el-checkbox label="包油"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="show_word">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="explain"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </div>
            <div class="upLoad">
              <div class="upLoadName">设计图纸或现场照片:</div>
              <div class="upLoadImg">
                <img
                  src="./../../../../../public/img/rent/upLoadImg.png"
                  class="upLoadImg"
                  @click="upImgdata"
                  v-if="!VideoUrl"
                />
                <img
                  :src="VideoUrl"
                  class="upLoadImg"
                  v-if="VideoUrl"
                  @click="upImgdata"
                />
              </div>
            </div>
          </div>
          <!-- 设备需求 -->
          <div
            class="equipmentContent"
            v-for="(item, index) in myValue"
            :key="index"
          >
            <div class="equipmentTitle">
              <div class="equipmentTitleName">*</div>
              <div class="equipmentTitleInfo">设备需求:</div>
            </div>
            <div class="equipmentListBox">
              <div>
                <el-cascader
                  ref="tree"
                  class="listWidthselect1"
                  v-model="item.typeSize"
                  placeholder="请选择设备类型"
                  :options="aarNew"
                  filterable
                  @change="onChange(index)"
                >
                </el-cascader>
              </div>
              <div class="equipmentListForm">
                <div>
                  <el-input-number
                    v-model="item.number"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    class="formNum"
                  ></el-input-number>
                </div>
                <div>
                  <el-input
                    placeholder="机械规格"
                    class="inputStyle1"
                    v-model="item.norm"
                  ></el-input>
                </div>
              </div>
              <div class="equipmentListForm">
                <div>
                  <el-date-picker
                    v-model="item.startTime"
                    type="date"
                    placeholder="选择日期"
                    class="inputStyle1Picker"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                  >
                  </el-date-picker>
                </div>
                <div class="flexList">
                  <div>
                    <el-input
                      placeholder="预计总工作量"
                      class="inputStyle2"
                      v-model="item.total"
                    ></el-input>
                  </div>
                </div>
                <img
                  src="./../../../../../public/img/rent/deleteIcon.png"
                  class="deleteIcon"
                  @click="deleteBtn(index)"
                  v-show="index > 0"
                />
                <!-- 台班 -->
                <div class="selectedBox" v-if="item.typeSize">
                  <input
                    type="text"
                    class="inputSelect"
                    v-model="item.unit"
                    placeholder="请选择"
                  />
                  <el-dropdown>
                    <img
                      src="./../../../../assets/img/selectIcon.png"
                      class="selectIcon"
                    />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="(items, i) of item.listData"
                        :key="i"
                        @click.native="handleCommand(items, index)"
                        >{{ items }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="addEquipment">
          <div class="addEquipmentBox" @click="addEquipment">
            <img
              src="./../../../../../public/img/rent/addIcon.png"
              class="addIcon"
            />
            <div class="addName" >添加设备需求</div>
          </div>
        </div>
        <div class="submitBtn" @click="nextNode">
          <div class="subMitName">下一步</div>
          <img
            src="./../../../../../public/img/rent/rightIcon.png"
            class="rightIcon"
          />
        </div>
      </div>
    </div>
    <!-- 下一页页面 -->
    <div class="container1" v-if="!isSwitchData">
      <div class="titleNode">
        <div class="titleBg">
          <!-- <div class="leftIcon" v-if="settlement">{{ settlement }}</div> -->
          <div class="titleName">{{ projectName }}</div>
        </div>
        <div class="address" v-if="place">
          <div>施工地点：</div>
          <div>{{ place }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentList">
            <div class="contentItem">
              <div class="contentListItem">
                <div class="userNameTitle">联系人：</div>
                <div class="userName">{{ userName }}</div>
              </div>
              <div class="contentListItem1">
                <div class="userNameTitle">联系电话：</div>
                <div class="userName">{{ userPhone }}</div>
              </div>
            </div>
            <div class="seeImg" @click="seeImg" v-if="VideoUrl">
              查看设计图纸
            </div>
            <div class="isDrawingBox" v-show="isDrawing">
              <img :src="VideoUrl" class="isDrawing" />
              <img
                src="./../../../../../public/img/mechanics/deleteIcon.png"
                class="deleteIconOne"
                @click="deleteBtnOne"
              />
            </div>
          </div>
          <div class="contentListInfo" v-if="checkList.length > 0">
            <div class="userNameTitle">施工说明：</div>
            <div
              class="userName"
              v-for="itemCheckList of checkList"
              :key="itemCheckList"
            >
              {{ itemCheckList }}
            </div>
          </div>
        </div>
        <div class="rentMachinery">
          <div class="rentMachineryTop">寻租机械</div>
          <div class="rentMachineryList">
            <div>机械数量</div>
            <div>预估总工作量</div>
            <div>进场日期</div>
          </div>
        </div>
        <div
          class="rentMachineeryInfo"
          v-for="(itemMyValue, itemMyValueIndex) of myValue"
          :key="itemMyValueIndex"
          v-show="itemMyValue.typeName"
        >
          <div class="rentInfoList">
            <div class="leftImgBox" v-if="itemMyValue.icon_url">
              <img :src="itemMyValue.icon_url" class="leftImg" />
            </div>
            <div class="rentInfoRight">
              <div class="rentInfoRightTitle">{{ itemMyValue.typeName }}</div>
              <div class="rentInfoRightTitleContent" v-if="itemMyValue.norm">
                <div>机械规格：</div>
                <div>{{ itemMyValue.norm }}</div>
              </div>
            </div>
          </div>
          <div class="rentInfoRightInfo">
            <div class="rightNum" v-if="itemMyValue.total">
              {{ itemMyValue.number }}台
            </div>
            <div class="rightWorkload">
              {{ itemMyValue.total }}{{ itemMyValue.unit }}
            </div>
            <div class="rightTime">{{ itemMyValue.startTime }}</div>
          </div>
        </div>
        <div class="toSubmit" @click="toSunbMit">提交订单</div>
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import {
  typemenuthirds,
  needUpload,
  saveneeds,
} from "./../../../../apis/api.js";
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
let inputElement = null;
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    NavBarHeader,
    FooterBar,
  },
  data() {
    let self = this;
    return {
      expect_period: "", //预计工期  expect_period
      expect_period_units: "天", // 预计工期单位
      predictArray: ["天", "月"],
      array2: [
        {
          name: "台班",
          unit_id: 0,
        },
        {
          name: "土石方",
          unit_id: 1,
        },
        {
          name: "立方米",
          unit_id: 2,
        },
        {
          name: "米",
          unit_id: 3,
        },
        {
          name: "月",
          unit_id: 4,
        },
        {
          name: "车",
          unit_id: 5,
        },
        {
          name: "平方米",
          unit_id: 6,
        },
        {
          name: "个",
          unit_id: 7,
        },
        {
          name: "年",
          unit_id: 8,
        },
        {
          name: "小时",
          unit_id: 9,
        },
        {
          name: "延米",
          unit_id: 10,
        },
        {
          name: "计量",
          unit_id: 11,
        },
        {
          name: "吨",
          unit_id: 13,
        },
        {
          name: "其他",
          unit_id: 12,
        },
      ],
      isSwitchData: true,
      timeValue: "", //报名截至日期
      place: "", //施工地点
      // settlement: "", //结算周期
      explain: "", //施工说明
      userName: "", //姓名
      userPhone: "", //电话
      projectName: "", //项目名称
      typeName: "", //机械类型三级
      icon_url: "", //固定的机械图片
      checkList: [],
      isShow: false, //展开施工说明
      isAddress: false,
      isDrawing: false, //查看设计图纸
      isBtn: "展开", //显示展开还是收起
      isImg: require("./../../../../../public/img/rent/selectButtomIcon.png"), //展开还是收起的icon
      myValue: [
        {
          typeSize: "", //设备类型
          number: 1, //设备需求数量
          startTime: "", //设备需求日期
          norm: "", //机械规格
          total: "", //总工作量
          unit: "", //台班
          typeName: "", //机械类型三级
          icon_url: "", //固定的机械图片
          listData: [],
        },
      ],
      aarNew: [], //机械类型
      imgShow: false,
      VideoUrl: "", //图纸或者现场图片
      amapManager,
      zoom: 12,
      center: [116.491173, 39.914523],
      events: {
        init: (o) => {
          self.latitude = 39.914523;
          self.longitude = 116.491173;
          self.place = "";
          o.getCity((result) => {
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          this.isAddress = false;
          this.center = [e.lnglat.lng, e.lnglat.lat]; //点击选择新地址为中心点
          self.longitude = e.lnglat.lng;
          self.latitude = e.lnglat.lat;
          this.longitude = e.lnglat.lng;
          this.latitude = e.lnglat.lat;
          let lonAndlat = self.longitude + "," + self.latitude;
          console.log(self.longitude + "," + self.latitude);
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress(lonAndlat, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.place = "";
                self.address = "";
                self.place = result.regeocode.formattedAddress;
                self.address = result.regeocode.formattedAddress;
                self.$nextTick();
              } else {
                self.place = "";
                self.address = "";
              }
            } else {
              self.place = "";
              self.address = "";
            }
          });
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
            },
          },
        },
      ],
    };
  },
  // 方法集合
  methods: {
    onDown() {
      if (this.isBtn == "展开") {
        this.isBtn = "收起";
        this.isImg = require("./../../../../../public/img/rent/selectTopIcon.png");
      } else {
        this.isBtn = "展开";
        this.isImg = require("./../../../../../public/img/rent/selectButtomIcon.png");
      }
      this.isShow = !this.isShow;
    },
    //设备类型
    handleChange(value) {
      console.log(value);
    },
    // 添加设备
    addEquipment() {
      this.myValue.push({
        type_id: "",
        number: 1,
        total: "",
        startTime: "",
        typeSize: "",
        norm: "",
        unit: "",
        typeName: "", //机械类型三级
        icon_url: "", //固定的机械图片
      });
    },
    //预计工期
    handleCommand2(key, index) {
      this.expect_period_units = key;
    },
    // 选择的台班
    handleCommand(key, index) {
      this.myValue[index].unit = key;
    },
    // 选择设备类型查找子节点数组
    onChange(index) {
      let obj = this.$refs["tree"][index].getCheckedNodes();
      let objData = obj[0].data.rentUnit;
      objData.forEach((item) => {
        this.myValue[index].listData = item;
      });
      this.myValue[index].typeName = obj[0].label;
      this.myValue[index].icon_url = obj[0].data.icon_url;
    },
    // 删除添加设备需求的每一项dom结构
    deleteBtn(key) {
      this.myValue.splice(key, 1);
    },
    // 下一步
    nextNode() {
      if (!this.userName) {
        this.$message.error("请填写姓名！");
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.userPhone)) {
        this.$message.error("请输入手机号码或号码格式不正确！");
        return;
      }
      if (!this.projectName) {
        this.$message.error("请填写项目名称！");
        return;
      }
      if (!this.timeValue) {
        this.$message.error("请填写报名截止日期！");
        return;
      }
      if (!this.expect_period) {
        this.$message.error("请填写预计工期！");
        return;
      }
      this.saveNeedDTOList = [];
      this.myValue.forEach((item) => {
        this.array2.forEach((items, index) => {
          if (items.name == item.unit) {
            item.unit_id = items.unit_id;
          }
        });
        item.typeSizes = item.typeSize;
        if (item.typeSizes) {
          this.saveNeedDTOList.push({
            number: item.number,
            total: item.total,
            startTime: item.startTime,
            typeId: item.typeSizes[0] ? item.typeSizes[0].toString() : 0, // 一级id
            typeSize: item.typeSizes[2] ? item.typeSizes[2].toString() : 0, // 三级id
            norm: item.norm,
            unit: item.unit_id,
            description: this.explain, //施工说明
          });
        }
      });
      var result = true;
      if (
        this.saveNeedDTOList.length == 0 ||
        this.myValue.length > this.saveNeedDTOList.length
      ) {
        this.$message.error("请选择设备类型！");
        return;
      }
      try {
        this.saveNeedDTOList.forEach((item, index) => {
          if (item.typeId == "") {
            this.$message.error("请选择设备类型！");
            throw (result = false);
          }
          if (item.norm == "") {
            this.$message.error("请填写机械规格！");
            throw (result = false);
          }
          if (item.startTime == "") {
            this.$message.error("请选择日期！");
            throw (result = false);
          }
          if (item.total == "") {
            this.$message.error("请填写预估工作总量！");
            throw (result = false);
          }
          if (item.unit == undefined) {
            this.$message.error("请填写工作总量单位！");
            throw (result = false);
          }
        });
        if (this.myValue.length > this.saveNeedDTOList.length) {
          this.$message.error("请选择设备类型！");
          return;
        }
      } catch (e) {
        console.log(e);
      }

      // 控制切换页面显示
      if (result) {
        this.isSwitchData = false;
      }
    },
    goAddress() {
      this.install();
    },
    // 点击input弹出地图
    onAddress() {
      this.isAddress = true;
    },
    onChangeAddress() {
      this.isAddress = false;
    },
    // 查看设计图纸
    seeImg() {
      this.isDrawing = true;
    },
    // 关闭设计图纸
    deleteBtnOne() {
      this.isDrawing = false;
    },
    // 提交
    async toSunbMit() {
      let data = {
        contacts: this.userName,
        contactsNumber: this.userPhone,
        engineeringName: "",
        projectName: this.projectName,
        address: this.place,
        xax: this.place?this.latitude:'',
        yax: this.place?this.longitude:'',
        projectType: "",
        // payType: this.settlement,
        workCondition: this.checkList.toString(),
        isTax: 0,
        isSign: 0,
        needId: "",
        replayEndTime: this.timeValue,
        engineeringId: "",
        expectPeriodUnits: "",
        expectPeriod: "",
        img: this.VideoUrl,
        saveNeedDTOList: this.saveNeedDTOList,
      };
      try {
        let res = await saveneeds(data);
        if (res.data.result == "1") {
          // 提交成功后清除购物车内容
          localStorage.removeItem("listData");
          this.$router.push({ path: "/ReleaseSuccess" });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取机械类型内容
    async typemenuthirds() {
      let data = {
        num: "1",
      };
      try {
        let res = await typemenuthirds(data);
        if (res.data.result == "1") {
          this.typeList = res.data.body.first;
          this.changeName(this.typeList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //机械类型中转换属性名
    changeName(data) {
      this.aarNew = data.map((arrlist) => {
        return {
          children: arrlist.types,
          value: arrlist.size_id,
          label: arrlist.name,
        };
      });
      this.aarNew.forEach((value, index) => {
        value.children = value.children.map((arrlist) => {
          return {
            children: arrlist.size,
            value: arrlist.size_id,
            label: arrlist.name,
          };
        });
      });
      this.aarNew.forEach((value, index) => {
        value.children.forEach((value, index) => {
          value.children = value.children.map((arrlist) => {
            return {
              value: arrlist.size_id,
              label: arrlist.name,
              rentUnit: arrlist.rentUnit,
              icon_url: arrlist.icon_url,
            };
          });
        });
      });
    },
    //上传图片
    upImgdata() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile1, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile1);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
    // 上传图片
    uploadFile1(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        const files = el.target.files[0];
        const isLt10M = files.size / 1024 / 1024 < 10;
        const size = files.size / 1024 / 1024;
        // 判断上传文件的大小
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            // 数据传到后台
            const formData = new FormData();
            formData.append("file", files); // 可以传到后台的数据
            that.updateImg(formData);
          };
        }
      }
    },
    // 上传图片接口
    async updateImg(file, data) {
      try {
        let res = await needUpload(file);
        if (res.data.result == "1") {
          this.VideoUrl = res.data.body.url;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 高德地图
    install() {
      let that = this;
      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          //city:'北京',
          input: "pickerinput2",
        });
        //初始化poiPicker
        that.poiPickerReady(poiPicker);
      });
    },
    poiPickerReady(poiPicker) {
      var that = this;
      window.poiPicker = poiPicker;
      var marker = new AMap.Marker();
      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20),
      });
      //选取了某个POI
      poiPicker.on("poiPicked", function (poiResult) {
        var source = poiResult.source,
          poi = poiResult.item,
          info = {
            source: source,
            id: poi.id,
            name: poi.name,
            location: poi.location.toString(),
            address: poi.address,
          };

        marker.setMap(that.map);
        infoWindow.setMap(that.map);
        marker.setPosition(poi.location);
        infoWindow.setPosition(poi.location);
        infoWindow.open(that.map, marker.getPosition());
        that.center = [marker.getPosition().lng, marker.getPosition().lat];
        that.longitude = marker.getPosition().lng;
        that.latitude = marker.getPosition().lat;
        let lonAndlat = that.longitude + "," + that.latitude;
        var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all",
        });
        geocoder.getAddress(lonAndlat, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.regeocode) {
              that.place = result.regeocode.formattedAddress;
              that.address = result.regeocode.formattedAddress;
              that.$nextTick();
            }
          }
        });
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.install();
    this.typemenuthirds();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.myValue = JSON.parse(localStorage.getItem("listData"));
    if (typeof this.$route.params.myValue == "object"||this.$route.params.myValue) {
      this.myValue = this.$route.params.myValue;
    } else {
      this.myValue = [
        {
          typeSize: "", //设备类型
          number: 1, //设备需求数量
          startTime: "", //设备需求日期
          norm: "", //机械规格
          total: "", //总工作量
          unit: "", //台班
          typeName: "", //机械类型三级
          icon_url: "", //固定的机械图片
          listData: []
        }
      ]
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.MechanicalRent {
  width: 100%;
  height: 100%;
}
.navBarHeader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #1c1e2b;
  z-index: 1000;
}
.container {
  width: 1180px;
  margin: 0 auto 0 auto;
  padding-top: 70px;
  box-sizing: border-box;
  padding-bottom: 146px;
}
.container1 {
  width: 1180px;
  margin: 0 auto 0 auto;
  padding-top: 70px;
  box-sizing: border-box;
  height: 100vh;
}
.titleBg1 {
  padding-top: 70px;
  margin-left: 31px;
  box-sizing: border-box;
}
.rentTitleIcon {
  width: 159px;
  height: 68px;
}
.titleName1 {
  margin-top: 20px;
  font-size: 14px;
  color: #ff855b;
  margin-left: 11px;
}
.listContainer {
  margin-top: 50px;
  margin-left: 41px;
  display: flex;
  flex-direction: column;
}
.listInputBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.listBox {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.listBox1 {
  display: flex;
  align-items: center;
}
.listContent {
  display: flex;
  align-items: center;
}
.styleTips {
  color: red;
  font-size: 14px;
}
.listName {
  font-size: 14px;
  color: #999;
  margin-left: 2px;
}
.inputContainer {
  margin-left: 70px;
}
.inputContainer1 {
  margin-left: 33px;
}
.inputContainerMargin {
  margin-left: 42px;
}
.inputContainerMargin1 {
  margin-left: 5px;
}
.inputStyle {
  width: 270px;
  height: 40;
}
.inputStylePick {
  width: 270px;
  height: 40;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.listSelectBox {
  display: flex;
  flex-direction: column;
}
.listWidth {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.listWidthAddress {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.listWidthName {
  font-size: 14px;
  color: #999;
}
.listWidthselect {
  width: 683px;
  height: 40px;
  margin-left: 51px;
}
.listWidthselect1 {
  width: 644px;
  height: 40px;
  margin: 20px;
}
.onDown {
  margin-left: 450px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dwonNmae {
  font-size: 14px;
  color: #ff855b;
}
.selectButtomIcon {
  width: 18px;
  height: 18px;
}
.downContent {
  margin-left: 41px;
}
.contentBox {
  display: flex;
  align-items: center;
}
.contentName {
  font-size: 14px;
  color: #999;
}
.checkListBox {
  margin-left: 52px;
}
.show_word {
  width: 683px;
  height: 82px;
  margin-left: 110px;
  margin-top: 23px;
}
.upLoad {
  margin-top: 20px;
  display: flex;
}
.upLoadName {
  width: 90px;
  font-size: 14px;
  color: #909399;
}
.upLoadImg {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  cursor: pointer;
}
.equipmentContent {
  margin-top: 27px;
  margin-left: 41px;
  display: flex;
}
.equipmentTitle {
  display: flex;
}
.equipmentTitleName {
  font-size: 14px;
  color: red;
  margin-right: 2px;
}
.equipmentTitleInfo {
  font-size: 14px;
  color: #999999;
}
.equipmentListBox {
  width: 684px;
  height: 200px;
  background: #f6f7fb;
  border-radius: 4px;
  margin-left: 41px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.equipmentListForm {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.formNum {
  width: 312px;
  margin-left: 20px;
}
.inputStyle1 {
  width: 312px;
  margin-left: 20px;
}
.inputStyle2 {
  width: 190px;
  margin-left: 20px;
}
.inputStyle3 {
  width: 104px;
  margin-left: 20px;
}
.inputStyle1Picker {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  width: 312px;
  margin-left: 20px;
}
.addEquipment {
  width: 683px;
  height: 40px;
  background: #f6f7fb;
  margin-top: 20px;
  margin-left: 150px;
  line-height: 40px;
}
.addEquipmentBox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.addIcon {
  width: 22px;
  height: 22px;
  margin-right: 8px;
}
.addName {
  font-size: 12px;
  color: #ff855b;
}
.deleteIcon {
  position: absolute;
  top: -5px;
  right: -5px;
}
.submitBtn {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  margin-left: 150px;
  cursor: pointer;
}
.rightIcon {
  margin-left: 21px;
}
.subMitName {
  font-size: 16px;
  color: #fff;
}
.amap-demo {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 100;
}
.selectedBox {
  width: 110px;
  height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-left: 5px;
}
.inputSelect {
  width: 80px;
  height: 100%;
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-left: 1px;
}
.selectIcon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  padding-left: 5px;
}
.flexList {
  display: flex;
  align-items: center;
}
// 下一页页面
.titleNode {
  width: 100%;
  height: 227px;
  margin-top: 40px;
  background: #fafbfc;
}
.titleBg {
  display: flex;
  padding-top: 19px;
  margin-left: 20px;
  box-sizing: border-box;
}
.leftIcon {
  background: url("./../../../../../public/img/rent/bgIcon.png") no-repeat;
  background-size: 100%, 100%;
  width: 75px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.titleName {
  width: 1160px;
  font-size: 26px;
  color: #000;
  margin-top: -5px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
}
.address {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 14px;
  color: #999;
}
.contentInfo {
  width: 1160px;
  height: 90px;
  background: #f5f7fa;
  border-radius: 4px;
  margin: 21px auto 0 auto;
}
.contentList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  padding-top: 20px;
  box-sizing: border-box;
}
.contentItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contentListItem {
  display: flex;
  align-items: center;
}
.contentListItem1 {
  display: flex;
  align-items: center;
  margin-left: 131px;
}
.contentListInfo {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;
}
.rentMachinery {
  width: 1180px;
  height: 40px;
  background: #f5f5f5;
  margin: 30px auto 0 auto;
}
.rentMachinery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  font-size: 12px;
}
.rentMachineryTop {
  margin-left: 20px;
}
.rentMachineryList {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 823px;
}
.rentMachineeryInfo {
  width: 1177px;
  height: 130px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.rentInfoList {
  width: 356px;
  height: 130px;
  border-right: 1px solid #e7e7e7;
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.leftImgBox {
  width: 90px;
  height: 90px;
  background: #f5f5f5;
  border-radius: 2px;
  position: relative;
}
.leftImg {
  width: 80px;
  height: 66px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rentInfoRight {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.rentInfoRightTitle {
  font-size: 16px;
  color: #333;
}
.rentInfoRightTitleContent {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
.rentInfoRightInfo {
  width: 823px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.rightNum {
  font-size: 16px;
  color: #ff855b;
  margin-left: 5px;
}
.rightWorkload {
  font-size: 16px;
  color: #999;
  margin-left: 50px;
}
.rightTime {
  font-size: 16px;
  color: #999;
}
.toSubmit {
  margin: 50px auto 0 auto;
  width: 600px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.seeImg {
  color: #ff855b;
  font-size: 12px;
  cursor: pointer;
}
.userNameTitle {
  font-size: 14px;
  color: #999;
}
.userName {
  font-size: 14px;
  color: #333;
}
.isDrawingBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
}
.isDrawing {
  width: 500px;
  height: 500px;
  z-index: 110;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.deleteIconOne {
  width: 32px;
  height: 32px;
  z-index: 120;
  cursor: pointer;
  position: absolute;
  top: 24%;
  left: 64%;
  transform: translate(-50%, -50%);
}
</style>
